<template>
  <view class="card-wrapper">
    <view v-if="isShowHistoryIndex" class="history-title">
      <view class="left-line"></view>
      <view class="tips-title">以下为已阅内容</view>
      <view class="right-line"></view>
    </view>
    <view class="time">{{ showTime(item.timestamp) }}</view>
    <view class="card-container">
      <template v-if="item.list.length <= 3">
        <template v-if="item.list.length == 1">
          <view
            v-for="(subItem, subIndex) in item.list"
            :key="subIndex"
            class="card-content"
          >
            <view
              v-if="subIndex == 0"
              class="three-card card"
              @click="handleToDetail(subItem)"
            >
              <image
                class="three-img"
                :src="subItem.photo || getTemplateImg(subItem)"
              ></image>
              <view class="three-title">{{ subItem.title }}</view>
            </view>
          </view>
        </template>
        <template v-else>
          <view
            v-for="(subItem, subIndex) in item.list"
            :key="subIndex"
            class="card-content"
          >
            <view
              v-if="subIndex == 0"
              class="one-card card"
              @click="handleToDetail(subItem)"
            >
              <image
                class="one-img"
                mode="widthFix"
                :src="subItem.photo || getTemplateImg(subItem)"
              ></image>
              <view class="title">{{ subItem.title }}</view>
            </view>
            <view
              v-else
              class="two-card card"
              :class="{ 'two-card-last': subIndex == item.list.length - 1 }"
              @click="handleToDetail(subItem)"
            >
              <view
                class="left"
                :class="{ 'left-line': subIndex == item.list.length - 1 }"
              >
                {{ subItem.title }}
              </view>
              <view
                class="right"
                :style="{ 'background-color': rightStyle[subItem.subscribeId] }"
                @click="handleToDetail(subItem)"
              >
                {{ rightTitle[subItem.subscribeId] }}
              </view>
            </view>
          </view>
        </template>
      </template>
      <template v-else>
        <template v-if="isOpenAllList">
          <view
            v-for="(subItem, subIndex) in item.list"
            :key="subIndex"
            class="card-content"
            @click="handleToDetail(subItem)"
          >
            <view
              v-if="subIndex == 0"
              class="one-card card"
              @click="handleToDetail(subItem)"
            >
              <image
                class="one-img"
                :src="subItem.photo || getTemplateImg(subItem)"
              ></image>
              <view class="title">{{ subItem.title }}</view>
            </view>
            <view
              v-else
              class="two-card card"
              :class="{ 'two-card-last': subIndex == item.list.length - 1 }"
              @click="handleToDetail(subItem)"
            >
              <view
                class="left"
                :class="{ 'left-line': subIndex == item.list.length - 1 }"
              >
                {{ subItem.title }}
              </view>
              <view
                class="right"
                :style="{ 'background-color': rightStyle[subItem.subscribeId] }"
                @click="handleToDetail(subItem)"
              >
                {{ rightTitle[subItem.subscribeId] }}
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <view
            v-for="(subItem, subIndex) in closeItems(item.list)"
            :key="subIndex"
            class="card-content"
          >
            <view
              v-if="subIndex == 0"
              class="one-card card"
              @click="handleToDetail(subItem)"
            >
              <image
                class="one-img"
                :src="subItem.photo || getTemplateImg(subItem)"
              ></image>
              <view class="title">{{ subItem.title }}</view>
            </view>
            <view
              v-else
              class="two-card card"
              :class="{ 'two-card-last': subIndex == 3 }"
            >
              <template v-if="subIndex < 3">
                <view
                  class="left"
                  :class="{ 'left-line': subIndex == item.list.length - 1 }"
                  @click="handleToDetail(subItem)"
                >
                  {{ subItem.title }}
                </view>
                <view
                  class="right"
                  :style="{
                    'background-color': rightStyle[subItem.subscribeId],
                  }"
                  @click="handleToDetail(subItem)"
                >
                  {{ rightTitle[subItem.subscribeId] }}
                </view>
              </template>
              <template v-else>
                <view
                  v-if="subIndex == 3"
                  class="open-card card"
                  @click="openClick"
                >
                  <view class="left-open"
                    >余下{{ item.list.length - 3 }}篇</view
                  >
                  <u-icon name="arrow-down" size="24" color="#ACACAC"></u-icon>
                </view>
              </template>
            </view>
          </view>
        </template>
      </template>
    </view>
  </view>
</template>

<script>
import { formatTimeFlex } from "@/utils/handle";
import { updateNotifyReadStatus,getPositionTemplate } from "@/api/modules/career";
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default: function () {
        return {};
      },
    },
    isShowHistoryIndex: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      template0: this.$imgBase + "careerPath/zttemplate0.jpg",
      template1: this.$imgBase + "careerPath/zttemplate1.jpg",
      template2: this.$imgBase + "careerPath/zttemplate2.jpg",
      template3: this.$imgBase + "careerPath/zttemplate3.jpg",
      template4: this.$imgBase + "careerPath/zttemplate4.jpg",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      isOpenAllList: false,
      rightTitle: {
        1: "温馨提示",
        2: "职位推荐",
        3: "专业详情",
        4: "薪酬详情",
        5: "职业详情",
      },
      rightStyle: {
        1: "#4f5dee",
        2: "#f27f3d",
        3: "#1d6dff ",
        4: "#ff6c24",
        5: "#a228db",
      },
    };
  },
  methods: {
    getTemplateImg(item) {
      if (item.subscribeId == 1 || item.subscribeId > 2) {
        return this[`template${item.dataId % 4}`];
      } else {
        return this.template4;
      }
    },
    showTime(timestamp) {
      const time = parseInt(timestamp);
      return formatTimeFlex(time);
    },
    closeItems(items) {
      return items.slice(0, 4);
    },
    async handleToDetail(subItem) {
      console.log("----subItem---->", subItem);
      // if (subItem.isRead == 0) {
      //   this.updateNotifyStatus(subItem);
      // }
      //2024年1月27日09:36:45 小细菌在职途群里说改成无视条件调用
      this.updateNotifyStatus(subItem);

      if (subItem.subscribeId == 1) {
        //资讯详情
        uni.navigateTo({
          url: "/pagesSub/career/careerInfo/articleDetail?id=" + subItem.dataId,
        });
      } else if (subItem.subscribeId == 2) {
        //职位详情
        uni.navigateTo({
          url: "/pagesSub/public/jobDetail/index?jobId=" + subItem.dataId,
        });
      } else if (subItem.subscribeId == 3) {
        //专业详情
        uni.navigateTo({
          url:
            `/pagesSub/careerNew/majorDetail/index?positionTagId=` +
            subItem.dataId,
        });
      } else if (subItem.subscribeId == 4) {
        //职业薪酬详情
        let tagTitle = subItem.extra;
        let positionId = subItem.dataId;
        let parentTitle = "";
        let topTitle = "";
        let pageName = "" || "123";
        let regionId = "100000"; //默认全国
        let regionName = "全国";
        let params = `positionName=${tagTitle}&positionId=${positionId}&regionId=${regionId}&regionName=${regionName}&parentTitle=${parentTitle}&topTitle=${topTitle}`;
        console.log("------params--------》验证通过", params);
        uni.navigateTo({
          url: `/pagesSub/careerNew/positionDictionary/careerSalaryReport/index?${params}`,
        });
      } else if (subItem.subscribeId == 5) {
        //职业大全职业详情
        let tagTitle = "";
        let positionId = subItem.dataId;
        let parentTitle = "";
        let topTitle = "";
        let params = `positionName=${tagTitle}&positionId=${positionId}&parentTitle=${parentTitle}&topTitle=${topTitle}`;
        //请求接口看是否走新页面
        const templateId = await this.getPositionTemplateFn(positionId);
        if (templateId == 6) {
          uni.navigateTo({
            url: `/pagesSub/careerNewPositionDictionary/positionDetail?${params}`,
          });
        } else {
          uni.navigateTo({
            url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`,
          });
        }

        // uni.navigateTo({
        //   url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`,
        // });
      } else {
        uni.showToast({
          title: "暂未开放，敬请期待",
          icon: "none",
          duration: 2000,
        });
      }
    },
    async getPositionTemplateFn(positionId) {
      const res = await getPositionTemplate({positionId: positionId});
      if (res.code == 200) {
        return res.data.templateId;
      } else {
        return 0;
      }
    },
    updateNotifyStatus(item) {
      let params = {
        id: item.id,
      };
      updateNotifyReadStatus(params).then((res) => {
        if (res && res.code == 200) {
          //   uni.showToast({
          //     icon: "none",
          //     title: "点击进入职讯",
          //   });
        } else {
          uni.showToast({
            icon: "none",
            title: res.status_desc,
            duration: 1000,
          });
        }
      });
    },
    openClick() {
      this.isOpenAllList = !this.isOpenAllList;
    },
  },
};
</script>

<style lang="scss" scoped>
.card-wrapper {
  .history-title {
    display: flex;
    margin: 32rpx;
    text-align: center;
    justify-content: space-between;

    .tips-title {
      margin: auto 0rpx;
      font-size: 26rpx;
      color: #bfbfbf;
    }
    .left-line {
      margin: auto 0rpx;
      width: 30%;
      height: 1.6rpx;
      background-color: #e1e1e1;
    }
    .right-line {
      margin: auto 0rpx;
      width: 30%;
      height: 1.6rpx;
      background-color: #e1e1e1;
    }
  }
  .time {
    margin: 20rpx;
    font-size: 26rpx;
    color: #888888;
    text-align: center;
  }
  .card-container {
    .card-content {
      // padding-bottom: 24rpx;
    }
  }
  .card {
    margin: 0 32rpx;
    border-radius: 16rpx;
    background-color: #f8f8f8;
  }

  .one-card {
    .one-img {
      width: 100%;
      border-radius: 16rpx 16rpx 0rpx 0rpx;
      height: 400rpx;
    }
    .title {
      margin: -103rpx 0rpx 0rpx 0rpx;
      padding: 16rpx 32rpx;
      width: 100%;
      height: 106rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.7) 100%
      );
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .two-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 22rpx 32rpx 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    .left {
      height: 112rpx;
      width: 70%;
      border-bottom: 2rpx solid #efefef;
      font-size: 32rpx;
      font-weight: bold;
      color: #222;
      line-height: 56rpx;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .left-line {
      border-bottom: none;
    }

    .right {
      width: 112rpx;
      height: 112rpx;
      text-align: center;
      font-size: 40rpx;
      font-weight: 900;
      color: #fff;
      // background-color: #4f5dee;
      border-radius: 4rpx;
    }
  }
  .two-card-last {
    border-radius: 0rpx 0rpx 16rpx 16rpx;
  }
  .three-card {
    .three-img {
      width: 100%;
      border-radius: 16rpx 16rpx 0rpx 0rpx;
    }
    .three-title {
      padding: 0 32rpx;
      margin: 24px 0;
      width: 100%;
      height: 105rpx;
      line-height: 48rpx;
      color: #222;
      font-size: 32rpx;
      font-weight: bold;
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  .open-card {
    display: flex;
    padding: 24rpx 36rpx 24rpx 36rpx;
    width: 100%;
    justify-content: space-between;
    background-color: #f8f8f8;
    .left-open {
      font-size: 26rpx;
      color: #cf7b49;
    }
  }
}
</style>
